<style>
.rt_content{background-color: #FFF;padding: 20px;}
#video_tab{height: 36px;line-height: 36px;width: 20%;margin: 0 auto;font-size: 18px;}
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 5px solid transparent;
}

::-webkit-scrollbar-track {
  box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;
}

::-webkit-scrollbar-thumb {
  min-height: 20px;
  background-clip: content-box;
  box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;
}

::-webkit-scrollbar-corner {
  background: transparent;
}
</style>
<div class="page_title">
    <h2 class="fl">【{$info.user.uname}】的{$pageTitle}</h2>
    <a class="fr top_rt_btn iconfont iconfont-chexiao" href="{:U('admin/Stream/index')}">返回列表</a>
</div>
<section>
<ul class="admin_tab">
    <li><a class="{neq name='dis' value='video'}active{/neq}" >{$pageTitle}</a></li>
    <li id="disVideo"><a class="{eq name='dis' value='video'}active{/eq}">回放</a></li>
</ul>
<div class="admin_tab_cont" style="display:{eq name='dis' value='video'}none{else /}block{/eq};">
    <script type="text/javascript" src="/public/ckplayer/ckplayer/ckplayer.js" charset="utf-8"></script>
    <div class="clearfix stream_box">
        <div class="fl show_stream_box">
            <div id="show_stream"></div>
        </div>
        <div class="fl msg_box">
            <div class="msg_list">
            </div>
            <div class="msg_send">
                <input type="text" id="txt" class="textbox" style="width: 60%;" />
                <a class="link_btn send_msg" style="margin-left: 2%;">发送</a>
            </div>
        </div>
        <div class="fl stream_info">
            <table class="table">
            <tr>
                <th colspan="2">主播当前信息</th>
            </tr>
            <tr>
                <td class="center">主播昵称</td>
                <td class="center">{$info.user.uname|default="未设置"}</td>
            </tr>
            <tr>
                <td class="center">直播间标题</td>
                <td class="center">{$info.stream_title|default='未设置'}</td>
            </tr>
            <tr>
                <td class="center">开播时间</td>
                <td class="center">{eq name="info.status" value="1"}{:date('Y-m-d H:i:s',$info.airtime)}{else /}暂未开播{/eq}</td>
            </tr>
            <tr>
                <td class="center">性别</td>
                <td class="center">{eq name="info.user.sex" value="1"}男{else /}女{/eq}</td>
            </tr>
            <tr>
                <td class="center">已获得金币数量(个)</td>
                <td class="center" id="gold">{$info.user_data.gold|default='0'}</td>
            </tr>
            <tr>
                <td class="center">已收到的赞(个)</td>
                <td class="center" id="zan">{$info.user_data.zan_count|default='0'}</td>
            </tr>
            <tr>
                <td class="center">直播浏览量(次)</td>
                <td class="center" id="view_count">{$info.user_data.view_count|default='0'}</td>
            </tr>
            <tr>
                <td class="center">已直播时长(分钟)</td>
                <td class="center">{eq name="info.status" value="1"}{:getTimediff($info.airtime)}{else /}0{/eq}</td>
            </tr>
            <tr>
                <th class="center" colspan="2">直播间操作</th>
            </tr>
            <tr>
                <td class="center stream_info_status" colspan="2">
                        <span>禁播状态：</span>
                        <input type="radio" name="status" id="checkbox_status0" value="1" {eq name="info.disable_code" value="1"}checked="checked"{/eq} class="chk_5" />
                        <label for="checkbox_status0">解除禁播</label>
                        <input type="radio" name="status" id="checkbox_status1" value="0" {eq name="info.disable_code" value="0"}checked="checked"{/eq} class="chk_5" />
                        <label for="checkbox_status1">永久禁播</label>
                        <input type="radio" name="status" id="checkbox_status2" value="2" {eq name="info.disable_code" value="2"}checked="checked"{/eq} class="chk_5" />
                        <label for="checkbox_status2">限时禁播</label>
                        
                        <div class="set_disable_time" style="margin-top: 5px;display:{eq name='info.disable_code' value='2'}block{else /}none{/eq};">
                            <span>禁播时长：</span>
                            <input type="text" name="int_disable_time" class="textbox" value="" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" />
                            <select class="select" name="disable_unit" style="padding:0 15px;">
                                    <option value="i" >分</option>
                                    <option value="h" >时</option>
                                    <option value="d" >天</option>
                                    <option value="m" >月</option>
                                    <option value="y" >年</option>
                            </select>
                            {eq name="info.disable_code" value="2"}
                            <div style="line-height: 38px;height:38px;"><span>当前禁播恢复时间：{:date('Y-m-d H:i',$info.disable_time)}</span></div>
                            {/eq}
                            
                        </div>
                        <div style="margin-top: 10px;">
                                <input type="button" id="submit_set_disable" data-default_set="{$info.disable_code}" class="link_btn" value="保存" />
                            </div>
                        
                </td>
            </tr>
        </table>
        </div>
    </div>
</div>
<div class="admin_tab_cont" style="display:{eq name='dis' value='video'}block{else /}none{/eq};">
    <!--左右分栏：左侧栏目-->
    <div class="cont_col_lt" style="height:500px;min-width: 80%;">
        <div id="video_tab">回放视频</div>
        <table class="table">
            <tr>
                <th>视频标题</th>
                <th>视频起始时间</th>
                <th>视频保存格式</th>
                <th>视频点击次数</th>
                <th>视频处理状态</th>
                <!--<th>操作</th>-->
            </tr>
            {volist name="video_list.data" id="vo"}
            <tr>
                <td class="center">{$vo.video.video_title}</td>
                <td class="center">{$vo.video.video_start_format} - {$vo.video.video_end_format}</td>
                <td class="center">{$vo.video.video_ext}</td>
                <td class="center">{$vo.video.replay_count}</td>
                <td>
                {switch name="vo.video.status_code"}
                {case value="0"}
                    <i style="color:#38B018;" class="iconfont iconfont-zhengque"></i></td>
                {/case}
                {case value="3"}
                    <i style="color:#38B018;" class="iconfont iconfont-cuowu"></i></td>
                {/case}
                {default /}
                    <i style="color:#38B018;" class="iconfont iconfont-jishiqi"></i></td>
                {/switch}
                <!--<td class="center">
                    <a class="inner_btn loadContent" data-href="{:U('admin/Syncdata/info',['config_id'=>encrypt_id($vo.config_id)])}">查看详情</a>
                    <a class="inner_btn loadContent" data-href="{:U('admin/Syncdata/edit',['config_id'=>encrypt_id($vo.config_id)])}">修改</a>
                </td>-->
            </tr>
            {/volist}
        </table>
        <aside class="paging">
            {$video_list.html}
        </aside>
    </div>
    <!--左右分栏：右侧栏-->
    <div class="cont_col_rt border" style="max-width: 19%;">
        <table class="table">
            <tr>
                <td class="center">主播昵称</td>
                <td class="center">{$info.user.uname}</td>
            </tr>
            <tr>
                <td class="center">性别</td>
                <td class="center">{eq name="info.user.sex" value="1"}男{else /}女{/eq}</td>
            </tr>
            <tr>
                <td class="center">金币数量(个)</td>
                <td class="center">{$user_account.gold}</td>
            </tr>
            <tr>
                <td class="center">收到的赞</td>
                <td class="center">{$user_account.zan_count}</td>
            </tr>
            <tr>
                <td class="center">上次直播浏览人数</td>
                <td class="center">{$user_account.view_count}</td>
            </tr>
            <tr>
                <td class="center">直播时长(分钟)</td>
                <td class="center">{$user_account.live_time}</td>
            </tr>
        </table>
    </div>
</div>
</section>
<script type="text/javascript" src="__static__/js/socket.js" charset="utf-8"></script>
<script src="__static__/js/plugin/comtentMenu/jquery.contextMenu.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
    /** 回放视频 **/
    $("#disVideo").unbind('click').bind('click',function(){
        var url = U("admin/Stream/info")+'?dis=video&stream_uid='+'{:encrypt_id($info["uid"])}';
        admin.getContentByUrl(url);
        return false; 
    });
    var flashvars={
        //f:'rtmp://live.hkstv.hk.lxdns.com/live/hks',
        f:'{$info.playurls.rtmp}',
        c:0,
        p:1,
        er:'{eq name="info.status" value="0"}已被禁止直播{else /}主播未开播{/eq}'
    };
    var video=['{$info.playurls.hls}'];
    CKobject.embed('/public/ckplayer/ckplayer/ckplayer.swf','show_stream','ckplayer_show_stream','380','720',false,flashvars,video);
    // 连接聊天
    var socketObj = new socket('ws://114.215.203.142:9902?token={$im_token}');
    var cid = '{$info.im.cid}';
    // 连接到当前聊天室
    socketObj.open(function(res){
        if(!cid) return false;
        var jsonString = '2["convr.join",{"cid":'+cid+'}]';
        socketObj.send(jsonString);
    });
    var userNameArr = [];
    var setBottom = true;
    var s = 0;
    var txt = '';
    //处理接收消息
    socketObj.message(function(msg){
        var message = msg.data.slice(1);
        var messageObj = eval('('+message+')');
            messageObj = messageObj[1];
        DEBUG && console.log(messageObj);
        if(messageObj.type == 0){
            var usid = messageObj.ext.ZBUSID;
            if(!userNameArr[usid]){
                var item = {
                    usid:usid
                };
                var send_data = {
                    url:U('admin/Stream/getStreamUserName'),
                    data:{
                        usid:usid,
                    },
                    type:"POST"
                };
                send_ajax(send_data,function(res){
                    if(res.status == 1){
                        //暂存信息
                        for(var key in item){
                            var v = item[key];
                            userNameArr[v] = res.data.uname;
                        }
                        //取得uname
                        var uname = userNameArr[usid];
                        var msg = '<div class="msg_list_item from_user" data-msg_from="'+messageObj.uid+'" id="'+messageObj.mid+'"><a>'+uname+'</a>：<span>'+messageObj.txt+'</span></div>';
                        return addMsg(msg,messageObj.mid);
                        
                    }else{
                        return false;
                    }
                })
            }else{
                var uname = userNameArr[usid];
                var msg = '<div class="msg_list_item from_user" data-msg_from="'+messageObj.uid+'" id="'+messageObj.mid+'"><a>'+uname+'</a>：<span>'+messageObj.txt+'</span></div>';
                return addMsg(msg,messageObj.mid);
            }
            
        }else if(messageObj.type == 210 &&messageObj.ext.customID == '50700'){
            setTimeout(function(){
                msg_info('正在加载回放视频','主播已结束直播',3000);
                setTimeout(function(){
                    var url = U('admin/Stream/info')+'?dis=video&stream_uid='+'{:encrypt_id($info["uid"])}';
                    admin.getContentByUrl(url);
                },600);
            },1000);
        }
    });
    /**
      * @name 添加消息到展示列表
      */
    function addMsg(msg,mid){
        if(mid && $(".msg_list").find('#'+mid)[0]){
            return false;
        }
        $(".msg_list").append(msg);
        var msg_num  = $(".msg_list div").length;
        var now_height = $(".msg_list div:eq(0)").height() * msg_num + 15 * msg_num;
        if(now_height > $(".msg_box").height()){
            setBottom && $(".msg_list_item:eq(0)").remove();
        }
        setBottom && $(".msg_list").scrollTop(now_height);
        showDisa();
    }
    //管理员发言
    $(".send_msg").unbind("click").bind('click',function(){
       var txt = $("#txt").val();
       var send_data = {
            url:U('admin/Stream/sendMessage'),
            type:'POST',
            data:{
                cid:'{$info.im.cid}',
                txt:txt
            }
       };
       send_ajax(send_data,function(res){
            if(res.status == 1){
                var msg = '<div class="msg_list_item"><a>你</a>：<span>'+$("#txt").val()+'</span></div>';
                addMsg(msg);
                $("#txt").val('');
            }else{
                var txt = cid ? '消息发送失败,请重新刷新页面重新尝试' : '主播未开播,暂时不能发送消息';
                msg_error(txt,'',1800);
            }
       });
       
    });
    //点击回车发送消息
    $(window).unbind("keyup").bind('keyup',function(e){
        if(e.keyCode == 13){
            $(".send_msg").click();
        }
    });
    //鼠标移动到消息区域,停止刷新消息
    $(".msg_list").bind({
        mouseleave:function(){
            //鼠标离开
            setBottom = true;
        },
        mouseenter:function(){
            //鼠标移入
            setBottom = false;
        }
    });
    /**
      * @name 定时查询主播的情况
      */
    s = setInterval(function(){
        var send_data = {
            url:U('admin/Stream/getTmpeAccount'),
            data:{
                stream_uid:'{:encrypt_id($info.uid)}'
            },
            type:"POST"
        };
        send_ajax(send_data,function(res){
            var t_html = '';
            if(res.status == 1){
                if($("#gold").html() != res.data.account.gold) $("#gold").html(res.data.account.gold);
                if($("#zan").html() != res.data.account.zan_count) $("#zan").html(res.data.account.zan_count);
                if($("#view_count").html() != res.data.account.view_count) $("#view_count").html(res.data.account.view_count);
            }
            return true;
        })
    },30000);
    // 捕获F5事件
    $(window).keydown(function(e){
        var ev = window.event || e;
        var code = ev.keyCode || ev.which;
        if (code == 116) {
             // 阻止默认的F5事件
            clearInterval(s);
        }
     });
    /** 禁播-选项 **/
    $(".chk_5").die("click").click(function(){
        if($("input[name='status']:checked").val() == 2){
            $(".set_disable_time").show();
        }else{
            $(".set_disable_time").hide();
        }
    });
    /** 禁播-提交 **/
    $("#submit_set_disable").click(function(){
        var d_code = $(this).data("default_set");
        var c_code = $("input[name='status']:checked").val();
        if(c_code != 2 && d_code == c_code){
            msg_success('保存成功');
            return true;
        }
        var c_time = 0;
        //是否选择限时禁播
        if(c_code == 2){
            //获取输入值
            var c_time = $("input[name='int_disable_time']").val();
                c_time = parseInt(c_time);
            if(!c_time){
                msg_info('请输入有效的禁播时长');
                return false;
            }
        }
        var send_data = {
            url:U('admin/Stream/setDisable'),
            data:{
                disable_code:c_code,
                stream_uid:'{:encrypt_id($info.uid)}',
                disable_time:c_time,
                disable_unit:$("select[name='disable_unit']").val()
            }
        };
        send_ajax(send_data,function(res){
            if(res.status == 1){
                msg_success(res.data.info);
                if(typeof(res.data.time) != 'undefined' && res.data.time != 0){
                    var dis_html = '<div style="line-height: 38px;height:38px;"><span>当前禁播恢复时间：'+res.data.time+'</span></div>';
                    $(".set_disable_time").append(dis_html);
                }
            }else{
                typeof(res.message) != 'undefined' ? msg_error(res.message) : msg_error('设置失败,请重新尝试');
            }
        })
    });
    /**
      * @name 禁言
      */
    function showDisa(){
        $('.from_user').contextMenu('context-menu', {
            '禁言30分钟': {
                click: function (element) { // element is the jquery obj clicked on when context menu launched
                    var im_uid = $(element).data('msg_from');
                    if(!im_uid) return false;
                    setStopTalk(im_uid,30,'i');
                },
                klass: "menu-item-1" // a custom css class for this menu item (usable for styling)
            },
            '禁言1小时': {
                click: function (element) { // element is the jquery obj clicked on when context menu launched
                    var im_uid = $(element).data('msg_from');
                    if(!im_uid) return false;
                    setStopTalk(im_uid,1,'h');
                },
                klass: "menu-item-1" // a custom css class for this menu item (usable for styling)
            },
            '禁言2小时': {
                click: function (element) { // element is the jquery obj clicked on when context menu launched
                    var im_uid = $(element).data('msg_from');
                    if(!im_uid) return false;
                    setStopTalk(im_uid,2,'h');
                },
                klass: "menu-item-1" // a custom css class for this menu item (usable for styling)
            },
            '禁言1天': {
                click: function (element) { // element is the jquery obj clicked on when context menu launched
                    var im_uid = $(element).data('msg_from');
                    if(!im_uid) return false;
                    setStopTalk(im_uid,1,'d');
                },
                klass: "menu-item-1" // a custom css class for this menu item (usable for styling)
            },
            '永久禁言': {
                click: function (element) { // element is the jquery obj clicked on when context menu launched
                    var im_uid = $(element).data('msg_from');
                    if(!im_uid) return false;
                    setStopTalk(im_uid,0,0);
                },
                klass: "menu-item-1" // a custom css class for this menu item (usable for styling)
            },
            '取消': {
                click: function (element) { // element is the jquery obj clicked on when context menu launched
                    return false;
                },
                klass: "second-menu-item"
            }
        });
    }
    function setStopTalk(im_uid,etime,unit){
        if(!im_uid ) return false;
        var send_data = {
            url:U('admin/Stream/setImStoMessage'),
            data:{
                im_uid:im_uid,
                im_cid:cid,
                time:etime,
                unit:unit
            }
        };
        send_ajax(send_data,function(res){
            if(res.status == 1){
                msg_success(res.data.info);
            }else{
                typeof(res.message) != 'undefined' ? msg_error(res.message) : msg_error('设置失败,请重新尝试');
            }
        })
    }
    showDisa();
})
</script>
